<template>
  <div>
    <el-form :model="params" ref="ruleForm" label-position="right" size="small" label-width="110px" class="base-search-more">
      <el-row >
        <el-col :span="6" v-if="$store.state.showAgent">
          <el-form-item label="区域">
            <agent-list style="width: 100%" :agentids="params.agentIds"
                        v-on:listenToChildEvent="getAentId"></agent-list>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="活动类型">
            <el-select style="width:100%" v-model="params.ptype" placeholder="活动类型" clearable>
              <el-option label="满减" value="1"></el-option>
              <el-option label="打折" value="2"></el-option>
              <!-- <el-option label="赠品" value="3"></el-option>-->
              <el-option label="特价" value="4"></el-option>
              <el-option label="满免配送费" value="5"></el-option>
              <!--  <el-option label="优惠券" value="6"></el-option>-->
              <el-option label="免部分配送费" value="7"></el-option>
              <el-option label="新用户立减活动" value="8"></el-option>
              <!--  <el-option label="首单立减活动" value="9"></el-option>-->
              <el-option label="商户红包" value="10"></el-option>
              <el-option label="下单返红包" value="11"></el-option>
              <el-option label="区域发红包" value="12"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="商家名称">
            <el-input style="width: 100%;" placeholder="请输入商家名称" v-model="params.busname" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="活动名称">
            <el-input style="width: 100%" placeholder="请输入活动名称" v-model="params.name" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="创建方">
            <el-select style="width: 100%" v-model="params.createtype" placeholder="选择活动状态" clearable>
              <el-option label="商家" value="0"></el-option>
              <el-option label="区域" value="1"></el-option>
              <el-option label="平台" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="活动审核">
            <el-select style="width: 100%" v-model="params.auditing" placeholder="选择审核状态" clearable>
              <el-option label="待审核" value="1"></el-option>
              <el-option label="审核通过" value="2"></el-option>
              <el-option label="审核未通过" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="$store.state.showAgent?12: 18" style="text-align:right;">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="$refs.pagination.handleSizeChange(10)">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row type="flex" class="sub-nav">
      <span :class="{'cur':params.timeType =='3'}" @click="cheackTableType(3)">进行中</span>
      <span :class="{'cur':params.timeType =='2'}" @click="cheackTableType(2)">未开始</span>
      <span :class="{'cur':params.timeType =='4'}" @click="cheackTableType(4)">已结束</span>
      <span :class="{'cur':params.timeType =='5'}" @click="cheackTableType(5)">已下线</span>
    </el-row>

    <div class="base-table-wrap" >
      <el-table :data="tableData.list" stripe style="width: 100%">
        <el-table-column label="活动信息" min-width="200" align="left">
          <template slot-scope="scope">
            <div class="flex-row btween">
              <div class="flex-row" v-if="scope.row.ptype =='1'">
                <div class="act-img flex-row-ver ac-full">减</div>
                <div class="act-title">
                  <div>满减活动</div>
                  <div v-if='scope.row.name !=""'>
                    (<span class="text-over" style="max-width: 140px">{{scope.row.name}}</span>)
                  </div>
                </div>
              </div>
              <div class="flex-row" v-if="scope.row.ptype =='2'">
                <div class="act-img ac-item"> 折</div>
                <div class="act-title">
                  <div>打折活动</div>
                  <div v-if='scope.row.name !=""'>({{scope.row.name}})</div>
                </div>
              </div>
              <div class="flex-row" v-if="scope.row.ptype =='3'">
                <div class="act-img flex-row-ver ac-item">赠</div>
                <div class="act-title">
                  <div>赠品活动</div>
                  <div v-if='scope.row.name !=""'>({{scope.row.name}})</div>
                </div>
              </div>
              <div class="flex-row" v-if="scope.row.ptype =='4'">
                <div class="act-img flex-row-ver ac-item">特</div>
                <div class="act-title">
                  <div>特价活动</div>
                  <div v-if='scope.row.name !=""'>({{scope.row.name}})</div>
                </div>
              </div>
              <div class="flex-row" v-if="scope.row.ptype =='5'">
                <div class="act-img flex-row-ver ac-delivery">免</div>
                <div class="act-title">
                  <div>免配送/满免配送费</div>
                  <div v-if='scope.row.name !=""'>({{scope.row.name}})</div>
                </div>
              </div>
              <div class="flex-row" v-if="scope.row.ptype =='7'">
                <div class="act-img flex-row-ver ac-delivery">免</div>
                <div class="act-title">
                  <div>免部分配送费</div>
                  <div v-if='scope.row.name !=""'>({{scope.row.name}})</div>
                </div>
              </div>
              <div class="flex-row" v-if="scope.row.ptype =='8'">
                <div class="act-img flex-row-ver ac-newuser">新</div>
                <div class="act-title">
                  <div>新用户立减</div>
                  <div v-if='scope.row.name !=""'>({{scope.row.name}})</div>
                </div>
              </div>
              <div class="flex-row" v-if="scope.row.ptype =='10'">
                <div class="act-img flex-row-ver ac-shopbox">红</div>
                <div class="act-title">
                  <div>商户红包</div>
                  <div v-if='scope.row.name !=""'>({{scope.row.name}})</div>
                </div>
              </div>
              <div class="flex-row" v-if="scope.row.ptype =='11'">
                <div class="act-img flex-row-ver ac-orderbox">返</div>
                <div class="act-title">
                  <div>下单返红包</div>
                  <div v-if='scope.row.name !=""'>({{scope.row.name}})</div>
                </div>
              </div>
              <div class="flex-row" v-if="scope.row.ptype =='12'">
                <div class="act-img flex-row-ver ac-aglenbox">代</div>
                <div class="act-title">
                  <div>区域红包</div>
                  <div v-if='scope.row.name !=""'>({{scope.row.name}})</div>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="内容" min-width="300" align="left">
          <template slot-scope="scope">
            <div class="flex act-msg">
              <span class="title" style='width: 50px'>日期:</span>
              <span>
                <span v-html='$options.filters.catption4(scope.row.starttime,scope.row.endtime)'></span>
                <span v-show="scope.row.hasOwnProperty('worktoday')" v-html='$options.filters.catption1(scope.row.worktoday)'></span>
                <span v-show="scope.row.hasOwnProperty('firstTime')" v-html='$options.filters.catption2(scope.row.firstTime,scope.row.secondtime,scope.row.thridtime)'></span>
              </span>
            </div>
            <div class="flex act-msg">
              <span class="title" style='width: 50px'>规则:</span>
              <span v-if="scope.row.ptype =='1'">
                 <div v-for="item in scope.row.runfastFullLess" :key="item.id">
                     在线支付满{{item.full}}元减{{item.less}}元（区域补贴{{item.subsidy}}元，商家承担{{item.less-item.subsidy}}元）
                 </div>
              </span>
              <span v-if="scope.row.ptype =='2'">指定商品折扣</span>
              <span v-if="scope.row.ptype =='3'">指定商品赠送</span> <span v-if="scope.row.ptype =='4'">指定商品特价</span>
              <span v-if="scope.row.ptype =='5'"> 在线支付满{{scope.row.fulls}}元免配送费（区域补贴{{scope.row.agentSubsidy}}元，商家承担剩余部分）</span>
              <span v-if="scope.row.ptype =='6'">优惠券</span>
              <span
                v-if="scope.row.ptype =='7'">免{{scope.row.lesss}}元配送费（区域补贴{{scope.row.agentSubsidy}}元，商家承担剩余部分）</span>
              <span v-if="scope.row.ptype =='8'">
                下单立减{{scope.row.lesss}}元(区域补贴￥{{scope.row.agentSubsidy}}商家承担{{scope.row.lesss-scope.row.agentSubsidy}}元)
              </span>
              <span v-if="scope.row.ptype =='9'">首单立减活动</span>
              <span v-if="scope.row.ptype =='10'">
                商家【{{scope.row.busname}}】 赠送{{scope.row.redamount|catpion3}}红包,消费满{{scope.row.fulls}}
                元可使用（红包限{{scope.row.redlimittype=='0'?'每天限制':scope.row.redlimittype=='1'?'总数量':''}} {{scope.row.rednum}}个，
                {{scope.row.redpersonlimittype=='0'?'每人一张':scope.row.redpersonlimittype=='1'?'每人每天一张':''}}）
              </span>
              <span v-if="scope.row.ptype =='11'">
                商家【{{scope.row.busname}}】 {{scope.row.fullreturn?'下单满'+scope.row.fullreturn+'元':'下单即'}}返{{scope.row.redamount|catpion3}}红包,
                消费满{{scope.row.fulls}}可使用（红包限{{scope.row.redlimittype=='0'?'每天限制':scope.row.redlimittype=='1'?'总数量':''}}{{scope.row.rednum}}个，
                {{scope.row.redpersonlimittype=='0'?'每人一张':scope.row.redpersonlimittype=='1'?'每人每天一张':''}}）
              </span>
              <span v-if="scope.row.ptype =='12'">
                区域【{{scope.row.agentname}}】赠送{{scope.row.redusertype =='0'?'全部用户':scope.row.redusertype =='1'?'近'+scope.row.redday +'天未使用用户':scope.row.redlimittype=='2'?'随机用户':''}}
                {{scope.row.redamount|catpion3}}红包，消费满{{scope.row.fulls}}可使用（红包限{{scope.row.redlimittype=='0'?'每天限制':scope.row.redlimittype=='1'?'总数量':''}}
                {{scope.row.rednum}}个，{{scope.row.redpersonlimittype=='0'?'每人一张':scope.row.redpersonlimittype=='1'?'每人每天一张':''}}）
              </span>
            </div>
            <div class="flex act-msg">
              <span class="title" style='width: 50px'>对象:</span>
              <span v-if="scope.row.ptype =='1'||scope.row.ptype =='5'||scope.row.ptype =='7'||scope.row.ptype =='8'">
                区域【{{scope.row.agentname?scope.row.agentname:'未知区域'}}】下{{scope.row.businessNum?scope.row.businessNum:'0'}}个商家
              </span>
              <span v-if="scope.row.ptype =='3'"> 新系统暂无此活动 </span>
              <span v-if="scope.row.ptype =='2'||scope.row.ptype =='4'">
                商家【{{scope.row.busname?scope.row.busname:'未知商家'}}】下{{scope.row.mapList.length>0?(scope.row.mapList[0].goodsNum):'0'}}个商品
              </span>
              <span
                v-if="scope.row.ptype =='10'||scope.row.ptype =='11'">商家【{{scope.row.busname?scope.row.busname:'未知商家'}}】</span>
              <span v-if="scope.row.ptype =='12'">区域【{{scope.row.agentname?scope.row.agentname:'未知区域'}}】</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="活动创建方" min-width="130" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.createtype | createtype}}</span><br/>
            <span>【{{scope.row.createbyname}}】</span>
          </template>
        </el-table-column>
        <el-table-column label="同享" min-width="80" align="center">
          <template slot-scope="scope">
            {{scope.row.shared ?'同享':'不同享'}}
          </template>
        </el-table-column>
        <el-table-column label="状态" min-width="120" align="center">
          <template slot-scope="scope">
            <span style="color:#999;" v-if="scope.row.discard">已下线</span>
            <span v-else v-html="$options.filters.catption(scope.row.starttime,scope.row.endtime)"></span>
            <span v-if="scope.row.ptype=='12'">
              {{scope.row.auditing=='0'?'待审核':scope.row.auditing=='1'?'审核通过':scope.row.auditing=='-1'?'审核未通过':'未知审核'}}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="140" align="right">
          <template slot-scope="scope">
            <span v-if="!scope.row.discard">
               <el-button class="el-text-check" type="text"  v-if="scope.row.ptype =='1'||scope.row.ptype =='2'||scope.row.ptype =='4'||
            scope.row.ptype =='5'||scope.row.ptype =='7'||scope.row.ptype =='8'" @click="handCheck(scope.row)">修改</el-button>
            </span>
            <el-button class="el-text-danger" type="text" v-if="!scope.row.discard"  @click="activitiesBecomeInvalid(scope.row)">下线</el-button>
            <el-button class="el-text-danger" type="text" @click="activitiesToDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pt-table-loading v-show="isloadingTable" />
      <pt-pagination ref="pagination" :total="tableData.total" @listeningEvent="triggerEvent" />
    </div>

  </div>

</template>
<script>
  export default {
     data() {
      return {
        isloadingTable: false,//表单等待
        isdisabled: false, //默认区域城市不让下拉
        isCheacked: '1', //选择的表格类型
        params: { //表格查询
          page: 0,
          size: 10,
          ptype: '', //活动裂隙
          name: '',  //活动名称
          busname:'',
          timeType: '3',  //活动状态
          agentIds: [],  //区域
          createtype: '', //活动
          auditing:'',  //审核
        },
        tableData: {} //表单数据
      }
    },
    filters: {
      catption(s, e) {
        if (!s | !e) return ''
        let date = new Date().getTime()
        let start = new Date(s.replace(/-/g, "/")).getTime()
        let end = new Date(e.replace(/-/g, "/")).getTime()
        if (date < start) {
          return '<span style="color:#a6a6a6;">' + "未开始" + '</span>'
        } else {
          if (date < end) {
            return '<span style="color:#0acd68;">' + "进行中" + '</span>'
          } else {
            return '<span style="color:#999;">' + "已过期" + '</span>'
          }
        }
      },
      catption1(dd) { // 星期
        let str = ''
        if (dd.length >0) {
          let arr = []
          dd.forEach((item, index) => {
            if (item == '1') arr.push('周一')
            if (item == '2') arr.push('周二')
            if (item == '3') arr.push('周三')
            if (item == '4') arr.push('周四')
            if (item == '5') arr.push('周五')
            if (item == '6') arr.push('周六')
            if (item == '7') arr.push('周日')
          })
          str += `<br />${arr.join('、')}`
        }else{
          str = ''
        }
        return str
      },
      catption2(t2, t3, t4) { // 时间日期
        let str = ''
        if (t2) {
          str += t2.split(',').join('-')
          if (t3) {
            str += '、' + t3.split(',').join('-')
          }
          if (t4) {
            str += '、' + t4.split(',').join('-')
          }
        } else {
          str += `全天`
        }
        return `<br />${str}`
      },
      catpion3(p) {
        if (!p) return ''
        if (p.indexOf(',') > -1) {
          return p.split(',').join('-') + '元的随机'
        } else {
          return p + '元'
        }
      },
      catption4(st1,st2){
        if(st1&&st2){
          return `${st1.slice(0,10)}至${st2.slice(0,10)}`
        }else {
          return ''
        }
      },
      createtype(val) { // 活动创建方
        const list = {0: '商家', 1: '区域', 2: '平台', 3: '总区域', 4: 'BD'}
        if (val >= 0) return list[val] || '未知角色'
        else return '未知角色'
      }
    },
    methods: {
      getAentId(item) { // 获取子组件传递的区域
        this.params.agentIds = item
      },
      handCheck(row) { //查看活动
        if (row.ptype == '1') this.$router.push({path: '/main/activity/cfullless', query: {id: row.id}})
        if (row.ptype == '2' || row.ptype == '4') this.$router.push({path: '/main/activity/citem', query: {id: row.id}})
        if (row.ptype == '5' || row.ptype == '7') this.$router.push({path: '/main/activity/cdelivery', query: {id: row.id}})
        if (row.ptype == '8') this.$router.push({path: '/main/activity/cnewuser', query: {id: row.id}})
      },
      activitiesBecomeInvalid(row) {  //活动作废
        this.$confirm('此操作将直接作废活动, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.isloadingTable = true
          this.$http.get('/server/activity/discard?' + this.qs.stringify({discard: true, id: row.id})).then(res => {
            if (res.data.success) {
              this.$message({type: 'success', message: '活动已下线'})
              this.getTableList()
            }
          }).finally(() => { this.isloadingTable = false })
        }).catch(() => {
          this.$message({type: 'info', message: '已取消下线'})
        })
      },
      activitiesToDelete(row) { //活动删除
        this.$confirm('此操作将永久删除列表, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.isloadingTable = true
          this.$http.get('/server/activity/delete?' + this.qs.stringify({deleted: '1', id: row.id})).then(res => {
            if (res.data.success) {
              this.$message({type: 'success', message: '活动已删除'})
              if (this.tableData.list.length == '1') {
                this.$refs.pagination.handleSizeChange(10)
              } else {
                this.getTableList()
              }
            }
          }).finally(() => { this.isloadingTable = false })
        }).catch(() => {
          this.$message({type: 'info', message: '已取消删除'})
        })
      },
      cheackTableType(type){
        this.params.timeType = type
        this.$refs.pagination.handleSizeChange(10)
      },
      getTableList() { // 获取商户列表数据
        this.isloadingTable = true
        const params = { ...this.params }
        params.agentIds = params.agentIds.length > 0 ? params.agentIds.join(',') : ''
        this.$http.get('/server/activity/list?' + this.qs.stringify(params)).then(res => {
          if (res.data.success) {
            this.tableData = res.data.data
          }
        }).finally(() => { this.isloadingTable = false })
      },
      triggerEvent(type,val) { // 分页器
        if (type === 'page') {
          this.params.page = val - 1
        } else if (type === 'size') {
          this.params.page = 0
          this.params.size = val
        }
        this.getTableList()
      }
    },
     mounted() {
      this.getTableList()
    }
  }

</script>
<style lang="scss" scoped>
  @import './css/set.scss';
</style>
